<template>
  <vxe-grid
    ref="xGrid6"
    v-bind="form6GridOptions"
    :height="height"
    style="width: 100%; margin-top: 20px"
  >
    <template #operate="{ row }">
      <template v-if="hasActiveEditRow(row)">
        <vxe-button content="取消" @click="clearRowEvent" />
        <vxe-button
          status="primary"
          content="保存"
          @click="saveRowEvent(row)"
        />
      </template>
      <template v-else>
        <vxe-button
          content="编辑"
          :disabled="isDisabled"
          @click="editRowEvent(row)"
        />
      </template>
      <vxe-button
        status="danger"
        content="删除"
        style="margin-top: 20px"
        :disabled="isDisabled"
        @click="removeRowEvent(row)"
      />
    </template>
    <template #countries_edit="{ row }">
      <vxe-input v-model="row.countries" />
    </template>
    <template #type_edit="{ row }">
      <vxe-input v-model="row.type" />
    </template>
    <template #numbers_edit="{ row }">
      <vxe-input v-model="row.numbers" />
    </template>
    <template #name_edit="{ row }">
      <vxe-input v-model="row.name" />
    </template>
  </vxe-grid>
  <el-button
    type="primary"
    text
    :icon="Plus"
    :disabled="isDisabled"
    @click="addInventor"
  >
    增加行
  </el-button>
</template>

<script setup lang="ts">
  import {
    ref,
    reactive,
    defineProps,
    withDefaults,
    onMounted,
    defineExpose,
    watch,
  } from 'vue'
  import { form6GridOptions } from '../table/column'
  import { Delete, Plus } from '@element-plus/icons-vue'
  import {
    VXETable,
    VxeGridInstance,
    VxeGridProps,
    VxeGridListeners,
  } from 'vxe-table'
  import { useAchievementAwardStore } from '@/store/modules/achievementAward'
  import { storeToRefs } from 'pinia'

  const props = withDefaults(
    defineProps<{
      isDisabled?: boolean
      isUpdate?: boolean
    }>(),
    {
      isDisabled: false,
      isUpdate: false,
    }
  )

  const xGrid6 = ref()
  const levelOptions = ref([])
  const departmentOptions = ref([])

  const hasActiveEditRow = (row) => {
    const $grid = xGrid6.value
    if ($grid) {
      return $grid.isEditByRow(row)
    }
    return false
  }
  const editRowEvent = (row) => {
    const $grid = xGrid6.value
    if ($grid) {
      $grid.setEditRow(row)
    }
  }

  const saveRowEvent = async (row) => {
    const $grid = xGrid6.value
    if ($grid) {
      await $grid.clearEdit()
      // form6GridOptions.loading = true
      // // 模拟异步保存
      // setTimeout(() => {
      //   form6GridOptions.loading = false
      // }, 300)
    }
  }

  const clearRowEvent = () => {
    const $grid = xGrid6.value
    if ($grid) {
      $grid.clearEdit()
    }
  }

  const removeRowEvent = async (row) => {
    const $grid = xGrid6.value
    // console.log($grid.data.length,'====');

    // if($grid.data.length === 1){
    //   VXETable.modal.message({ content: '至少需要保留一条数据', status: 'error' })
    //   return
    // }

    const type = await VXETable.modal.confirm('您确定要删除该数据?')
    if ($grid) {
      if (type === 'confirm') {
        await $grid.remove(row)
      }
    }
  }
  const addInventor = () => {
    const $grid = xGrid6.value
    $grid.insert({})
  }
  const tablePage = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 10,
  })

  const handlePageChange = ({ currentPage, pageSize }) => {
    tablePage.currentPage = currentPage
    tablePage.pageSize = pageSize
    // findList()
  }

  onMounted(() => {
    // if (props.listData.length != 0) {
    //   form6GridOptions.data = props.listData
    // }
  })

  const formInline = ref({})
  const store = useAchievementAwardStore()
  const { addForm } = store
  const { allForm } = storeToRefs(store)

  watch(
    () => props.isUpdate,
    (val) => {
      form6GridOptions.data = JSON.parse(
        allForm.value.patentSituation ?? '[]'
      )?.tableData
    }
  )
  const submit = async () => {
    formInline.value.patentSituation = JSON.stringify(
      xGrid6.value.getTableData()
    )
    addForm(formInline.value)
  }

  const height = ref(0)
  interface BaseTableHeight {
    (padding: number): number
  }
  const $baseTableHeight = inject<BaseTableHeight>('$baseTableHeight')
  onBeforeMount(() => {
    window.addEventListener('resize', handleHeight)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('resize', handleHeight)
  })

  const handleHeight = () => {
    height.value = $baseTableHeight(0)
  }

  const computeTotal = (row, a, b) => {
    row.total = (parseFloat(a) + parseFloat(b)).toFixed(2)
    return row
  }
  defineExpose({
    submit,
  })
</script>

<style scoped lang="scss">
  .form-inline {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 16px;
    grid-column-gap: 20px;

    .el-input {
      // --el-input-width: 323px;
    }

    .el-select {
      // --el-select-width: 323px;
    }

    :deep(.el-form-item__label) {
      padding: 0 5px 0 0;
    }

    :deep(.el-form-item) {
      margin-right: 0px;
      margin-bottom: 0px;
    }
  }

  .mt20 {
    margin-top: 20px;
  }
</style>
